<template>
  <div class="oilOrder">
    <c-title :hide="false" text="加油订单"></c-title>
    <van-tabs v-model="active" line-width="30px">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
    </van-tabs>
    <div class="orderList">
      <van-cell>
        <template #title>
          <div style="text-align: left;">订单号：JSKE56513214</div>
        </template>
        <template #default>
          <div style="font-weight: 500;font-size: 0.81rem;color: #00001C;">
            已支付
          </div>
        </template>
      </van-cell>
      <van-cell :border="false">
        <template #title>
          <div class="custom-title">时间</div>
        </template>
        <template #default>
          <div class="custom-value">2023-11-23 11:21:28</div>
        </template>
      </van-cell>
      <van-cell :border="false">
        <template #title>
          <div class="custom-title">车牌号</div>
        </template>
        <template #default>
          <div class="custom-value">粤A12345</div>
        </template>
      </van-cell>
      <van-cell :border="false">
        <template #title>
          <div class="custom-title">油号</div>
        </template>
        <template #default>
          <div class="custom-value">#95</div>
        </template>
      </van-cell>
      <div class="buttonBox">
        <div class="btn">支付</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  activated() {
    this.active = Number(this.$route.params.status);
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.oilOrder {
  .orderList {
    box-sizing: border-box;
    margin: 0.63rem 0.75rem;
    background: #fff;
    padding: 0 0 0.94rem 0;
    box-sizing: border-box;
    border-radius: 0.5rem;
    .van-cell {
      padding: 10px 0.63rem;
      border-radius: 0.5rem;
    }
    .custom-title {
      font-size: 0.81rem;
      color: #6e6e79;
      text-align: left;
    }
    .custom-value {
      font-weight: 500;
      font-size: 0.81rem;
      color: #00001c;
    }
    .buttonBox {
      display: flex;
      justify-content: flex-end;
      background: #fff;
      padding: 0 0.63rem;
      .btn {
        font-weight: 500;
        font-size: 0.81rem;
        color: #ffffff;
        padding: 0.59rem 1.31rem;
        background: #f15353;
        border-radius: 0.8rem;
        width: 4.25rem;
      }
    }
  }
}
</style>
